<!--
  _______
 |__   __|
    | |  ___  _ __ __      __ ___  _ __
    | | / _ \| '__|\ \ /\ / // _ \| '__|
    | ||  __/| |    \ V  V /|  __/| |
    |_| \___||_|     \_/\_/  \___||_|
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh" th:with="title='所有文章'">
<head th:include="include/list_inc::commonHeaderCustom('',~{::style})">
    <style type="text/css">
        .layui-btn i {
            font-size: 14px !important;
        }

        .table-header {
            padding: 16px 10px 0 15px;
        }
    </style>
</head>

<body>
<header th:include="include/edit_inc::commonHeaderContent">
</header>

<div>
    <div class="table-header" id="tableHeader">
        <div class="layui-form">
            <div class="layui-input-inline">
                <select id="selPostType">
                    <option value="">所有</option>
                    <option value="post" selected>文章</option>
                    <option value="note">笔记</option>
                    <option value="essay">随笔</option>
                    <option value="page">页面</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select id="selPostStatus">
                    <option value="">所有</option>
                    <option value="publish" selected>已发布</option>
                    <option value="draft">草稿</option>
                    <option value="trash">回收站</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input class="layui-input" data-type="reload" id="search" name="search" placeholder="关键字..."/>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
    <table id="postTable"></table>
</div>

<footer th:include="include/edit_inc::commonFooterCustom(~{::script})">
    <script type="text/javascript">
        layui.config({base: BUGUCMS_BASE_URL + 'static/lib/'}).extend({
            conf: 'bugucms/conf',
            tips: 'bugucms/extend/tips'
        }).use(['conf', 'tips', 'table', 'layer', 'form'], function () {
            var conf = layui.conf,
                table = layui.table,
                layer = layui.layer,
                form = layui.form,
                $ = layui.$,
                tips = layui.tips;

            //加载数据
            var myindex = layer.load();
            var postListUrl = BLOG_API_BASE_URL + 'postManage/list';//数据接口地址
            // 如果开启token，传入token
            if (conf.request.tokenName) {
                postListUrl += '?tokenString=' + conf.request.tokenString;
            }
            console.log("postListUrl:" + postListUrl);
            table.render({
                elem: '#postTable',
                url: postListUrl,
                where: {
                    search: $('#search').val(),
                    postType: $("#selPostType").val(),
                    postStatus: $("#selPostStatus").val()
                },
                method: 'post',
                page: true,//开启分页
                loading: true,//加载等待
                cols: [
                    [ //表头
                        {field: 'postId', title: 'ID', width: 80, sort: true, fixed: 'center'},
                        {
                            field: 'postTitle', title: '文章标题', sort: true, fixed: 'left', templet: function (d) {
                                var pname = d.postSlug;
                                var ptitle = d.postTitle;
                                if (ptitle == '') {
                                    if (d.postType == 'essay') {
                                        ptitle = '随笔';
                                    }
                                    ptitle += d.postId;
                                }
                                if (pname == '') {
                                    pname = d.postId;
                                }
                                return '<a class="layui-table-link" href="' + BLOG_BASE_URL + 'post/' + pname + '.html" target="_blank">' + ptitle + '</a>';
                            }
                        },
                        {field: 'postDate', title: '发布时间', width: 160, sort: true, fixed: 'center'},
                        {
                            field: 'action',
                            title: '操作',
                            width: 180,
                            sort: true,
                            fixed: 'center',
                            templet: function (d) {
                                var m = '<button class="layui-btn layui-btn-sm" bg-form-action="edit" bg-form-title="更新文章" bg-form-icon="layui-icon-release" bg-form-href="postManage/edit/' + d.postId + '"><i class="layui-icon">&#xe642;修改</i></button>';
                                var r = '<button class="layui-btn layui-btn-danger layui-btn-sm" bg-form-action="delete" bg-form-title="删除文章" bg-form-icon="layui-icon-release" bg-form-href="post/delete/' + d.postId + '"><i class="layui-icon">&#xe640;删除</i></button>';
                                return '<div class="layui-btn-group">' + m + r + '</div>';
                            }
                        }
                    ]
                ],
                done: function (res, curr, count) {
                    layer.close(myindex);
                }
            });

            var active = {
                reload: function () {
                    // if($('#search').val()==''){
                    //     layer.msg('关键字不能为空', {icon: 2});
                    //     return false;
                    // }
                    //执行重载
                    myindex = layer.load();
                    table.reload('postTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            search: $('#search').val(),
                            postType: $("#selPostType").val(),
                            postStatus: $("#selPostStatus").val()
                        },
                    });
                }
            };

            $('#tableHeader .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('#search').on('keypress', function (event) {
                if (event.keyCode == "13") {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                }
            });

            //ajax请求出错提示
            $(document).ajaxError(function (event, request, setting) {
                if (request.status === 200) {
                    tips.error('Invalid response');
                } else {
                    tips.error(request.status + ': ' + request.statusText);
                }
            });

            //监听事件,这个不一定要用lau-href,可以自己写
            $(document).on('click', '[bg-form-href]', function () {
                var _this = $(this);
                var action = _this.attr('bg-form-action');
                var title = _this.attr('bg-form-title');
                var href = _this.attr('bg-form-href');
                var icon = _this.attr('bg-form-icon');

                switch (action) {
                    case "edit": {
                        window.location.href = BLOG_BASE_URL + href;
                        break;
                    }
                    case "delete": {
                        deletePost(href);
                        break;
                    }
                }

                /**
                 * 删除文章
                 * @param id 文章ID
                 * @param obj 点击的当前元素
                 */
                function deletePost(url) {
                    //询问框
                    layer.confirm('您确认删除该文章么？', {
                        btn: ['确认', '取消'] //按钮
                    }, function () {
                        layer.closeAll('dialog');
                        var delUrl = BLOG_API_BASE_URL + url;
                        // 如果开启token，传入token
                        if (conf.request.tokenName) {
                            delUrl += '?tokenString=' + conf.request.tokenString;
                        }
                        console.log("delete url:" + delUrl);
                        $.post(delUrl, {}, function (res) {
                            doDeleteResult(res);
                        }, 'json');

                        function doDeleteResult(res) {
                            console.log(res);
                            if (res != null && res.status === 1) {
                                layer.msg('删除成功', {icon: 1});
                                window.location.reload();
                                //window.location.href = BUGUCMS_BASE_URL + BUGUCMS_ADMIN_PATH + "/?action=postManage/list&title=所有文章";
                            } else {
                                layer.msg('操作失败', {icon: 2});
                            }
                        }
                    }, function () {
                        // layer.msg('您放弃了操作', {
                        //     time: 20000, //20s后自动关闭
                        //     btn: ['明白了', '知道了']
                        // });
                    });
                }
            });
        });
    </script>
</footer>
</body>
</html>